import { createRouter, createWebHistory } from 'vue-router'
import { CoreTest } from '@/components/CoreIcon'
import { markRaw } from 'vue'
import { unmountGlobalLoading } from '../utils'
import loginRouters from './modules/login/index'
import exampleRoutes from './modules/example/index'
import { usePreferencesStore } from '@/stores'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('@/views/layout/index.vue'),
      redirect: '/workplace',
      children: [
        {
          path: '/workplace',
          component: () => import('@/views/workplace/index.vue'),
          meta: {
            title: 'workplace.workplace',
            icon: 'icon-gongzuotai',
            order: 3
          }
        },
        {
          path: '/workplace1',
          component: () => import('@/views/workplace/index.vue'),
          meta: {
            title: 'workplace.workplace',
            icon: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
            newIcon: true,
            openInNewWindow: true
          }
        },
        exampleRoutes,
        {
          path: '/demonstration',
          redirect: '/demonstration/page',
          meta: {
            title: 'demonstration.demonstration',
            icon: markRaw(CoreTest),
            newIcon: true
          },
          children: [
            {
              path: '/demonstration/page',
              redirect: '/demonstration/page/external',
              meta: {
                title: 'demonstration.page',
                order: 2,
                icon: markRaw(CoreTest),
                newIcon: true
              },
              children: [
                {
                  path: '/demonstration/page/external',
                  component: () =>
                    import('@/views/demonstration/page/external/index.vue'),
                  meta: {
                    title: 'demonstration.external',
                    link: 'https://tailwindcss.com/'
                  }
                },
                {
                  path: '/demonstration/page/embedded',
                  component: () =>
                    import('@/views/demonstration/page/embedded/index.vue'),
                  meta: {
                    title: 'demonstration.embedded',
                    iframeSrc: 'https://tailwindcss.com/'
                  }
                }
              ]
            },
            {
              path: '/demonstration/function',
              redirect: '/demonstration/function/editor',
              meta: {
                title: 'demonstration.function'
              },
              children: [
                {
                  path: '/demonstration/function/editor',
                  component: () =>
                    import('@/views/demonstration/function/editor/index.vue'),
                  meta: {
                    title: 'demonstration.editor',
                    newIcon: true
                  }
                },
                {
                  path: '/demonstration/function/markdown',
                  component: () =>
                    import('@/views/demonstration/function/markdown/index.vue'),
                  meta: {
                    title: 'demonstration.markdown'
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    loginRouters
  ]
})

router.beforeEach(async (_to, from) => {
  if (!from.name && from.path === '/') {
    const preferencesStore = usePreferencesStore()
    preferencesStore.initPreferences()
    unmountGlobalLoading()
  }
})

export default router
